import { useState } from 'react'
import { Transition } from 'react-transition-group'

const TransitionDemo = () => {
  const [inProp, setInProp] = useState(false)
  return (
    <div>
      <Transition in={inProp} timeout={2000}>
        {(state) => {

          return <h1 style={{
            transition: `opacity 2000ms ease-in-out`,
            opacity:
            (state==='entering' || state==='entered') ? 1 : 0
          }}>动画测试：{state}</h1>
        }}
      </Transition>
      <button onClick={() => setInProp(!inProp)}>click</button>
    </div>
  )
}

export default TransitionDemo
